<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script src="../lib/jquery-2.1.1.js"></script>
<script>
$(document).ready(function(){
	// 버튼 꾸미기
	$('.btn').css({
		'width' : '100px',
		'height' : '25px',
		'border' : '2px dotted pink',
		'border-radius' : '5px'
	});
	
	// 리스트가 담긴 박스 만들기
	$('#div1, #div2').css({
		'width' : '290px',
		'border' : '1px solid black',
		'border-bottom-radius' : '10px',
		'padding' : '10px',
		'background-color' : '#eeeeee',
		'overflow' : 'hidden',
		'white-space' : 'nowrap'  // 줄바꿔쓰기가 되지 않도록 하는것
	});
	$('#div2').css('position', 'absolute');
	
	
	// 버튼을 클릭했을 경우
	$('#btnAnimate').click(function(){
		$('#div1').animate({
			'width' : 'toggle',
			'opacity' : 'toggle'
		}, 1000);
	});
	
	var cnt = 0;
	$('#btnAnimate2').click(function(){
		if(cnt == 0 ){
			cnt = 1;
			$('#div2').animate({
				
				'height' : '290px',
				'fontSize' : '80px',
				'border-radius' : '300px',
				'text-align' : 'center'
			}, 800);
		}else{
			cnt = 0;
			$('#div2').animate({
				
				'height' : '18px',
				'fontSize' : '16px',
				'border-radius' : ''
			}, 1000);
		}
	});

});
</script>

</head>
<body>

<h3>Animate Event Example<hr/></h3>

<input type="button" value="Animate" id="btnAnimate" class="btn">
<p/>

<div id="div1">
	<li>사과</li>
	<li>배</li>
	<li>감</li>
	<li>포도</li>
	<li>참외</li>
	<li>복숭아</li>
	<li>수박</li>
	<li>딸기</li>
	<li>키위</li>
</div>

<p/>
<br/>

<input type="button" value="Animation" id="btnAnimate2" class="btn">
<p/>
<div id="div2">
	UI / UX
</div>
<p/>
<br/>

</body>
</html>